
var orgrecord;
var organizationgroupPanel =new Ext.Panel ({
	id : 'organizationgroup-panel',
	title : '组织视图',
	layout : 'border'
		,
	closable : true,
	defaults : {
		bodyStyle : 'padding:15px'
	},
	
	items : {

		region : 'center',
		autoScroll : true,
		border : false,
		contentEl : 'organizationgroupCanvas'
	}
});		

var OrganizationData =
	[
	   [1,'companylist','组织结构'],
	   [2,'rolelist','角色权限']
	];

var organizationgroupStore = new Ext.data.Store({
//	proxy : new Ext.data.HttpProxy({
//		url : 'showVersiongroupView.action?method=showVersiongroupList',
//		method : 'post'
//	}),
	
//	reader : new Ext.data.JsonReader({
//	root : "Versiongroup",
//	totalProperty : "totalVersiongroup",
//	id : "id"		
//}, [ {
//	name : 'id'
//}, {
//	name : 'viewType'
//}, {
//	name : 'cnName'
//}])
	
	proxy: new Ext.data.MemoryProxy(OrganizationData),
	reader: new Ext.data.ArrayReader({}, 
	      [
	         { name: 'id' },
	         { name: 'organizationType',type: 'string'},
	         { name: 'cnName',type: 'string' }
	      ]
	)

}); 



//var ViewRecord = Ext.data.Record.create([
//    { name: 'id' },
//    { name: 'viewType',allowBlank: false },
//    { name: 'cnName',allowBlank: false }
//    ]);
//                                       
//var myNewRecord = new ViewRecord(
//    { id: '1',viewType: 'FunctionView',cnName:'功能视图'},
//    { id: '2',viewType: 'OrganizationView',cnName:'组织视图'},
//    { id: '3',viewType: 'ProcessView',cnName:'业务流程视图'},
//    { id: '4',viewType: 'DomainmodelView',cnName:'业务对象视图'}
//    );


                                       

function showOrganizationgroup(viewtype) {
	//var cid=record.get('versionId');
	//viewgroupStore.add(myNewRecord);
	organizationgroupStore.load({ 
//    	params : {
//			cid : cid
//		},
		callback: function(r, options, success) { 
		if (success == false) { 
		alert("加载organizationgroup数据失败，无对应数据或者系统出现异常！"); 
		}
		else{
//			Ext.getCmp('content-panel').layout.setActiveItem('versiongroup-panel');
//			contentPanel.addTab('versiongroup-panel');
//			var vpage = Ext.getCmp('versiongroup-panel');
//			vpage.showPage();

			var canvas = document.getElementById('organizationgroupCanvas');
			var ctx = canvas.getContext('2d');
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawOrganizationMiniImgList(ctx,organizationgroupStore,canvas);
	

			}
		}
	})
}
var organizationMiniImg = new Image();//缩略图图片
organizationMiniImg.src = 'images/MiniPic/file.png';

var imgWidth=100;	//每个图标占的宽度
var imgHeight=80;	//每行图标占的高度
var column=8;		//每行的图标个数
var margin=15;		//边缘空出的距离

//绘制缩略图列表
function drawOrganizationMiniImgList(ctx,organizationgroupStore,canvas) {
	ctx.font = "10pt Arial";
	ctx.textBaseline = "top"; // 设置文字垂直对齐方式
	ctx.textAlign = "center"; // 设置文字水平对齐方式	
	
	for(var i=0;i<organizationgroupStore.getCount();i++){
		var record=organizationgroupStore.getAt(i);
		ix=(i%column)*imgWidth+margin;
		iy=Math.floor(i/column)*imgHeight+margin;
		ctx.drawImage(organizationMiniImg,ix,iy,organizationMiniImg.width,organizationMiniImg.height);
		ctx.fillText(record.get('cnName'), ix+organizationMiniImg.width/2,iy+organizationMiniImg.height);
	}
	canvas.onclick= function(event){onMouseClickOrganization(event);};	
}

//鼠标单击事件，单击缩略图转到模型详细数据页面
function onMouseClickOrganization(event){
	var x=event.layerX-margin;
	var y=event.layerY-margin;
	
	var index=Math.floor(y/imgHeight)*column+Math.floor(x/imgWidth);//点击到的缩略图的索引
	var right=(index%column)*imgWidth+organizationMiniImg.width;//点击到的缩略图的右边x坐标
	var bottom=Math.floor(index/column)*imgHeight+organizationMiniImg.height;	//点击到的缩略图的底部的y坐标
	
	if(index>organizationgroupStore.getCount()){
		return;
	}else if(x>right || y>bottom){
		return;
	}
	orgrecord=organizationgroupStore.getAt(index);
//	alert(record.get('organizationType'));
	
	//跳转到具体的模型详细数据页面
//	for(var i=2;i<viewgroupStore.getCount();i++){
//		var record2=viewgroupStore.getAt(i);
//		Ext.getCmp('content-panel').addTab(record2.viewType+'-panel');
//	}
	Ext.getCmp('content-panel').addTab(orgrecord.get('organizationType')+'-panel');
	//Ext.getCmp('content-panel').addTab('viewgroup-panel');
	
	Ext.getCmp(orgrecord.get('organizationType')+'-panel').showPage();
	//showViewgroup(record);
}
